<template>
  <div class="login">
    <div class="container row">
      <div class="sub-bg-left">
        <img src="./../assets/login/right_banner_fg.png" alt="">
      </div>
      <div class="sub-content-right">
        <div class="label-to-home"><router-link to="/">返回首页</router-link></div>

        <el-card class="box-card">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="用户登录" name="first">
              <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="用户名">
                  <el-input v-model="form.username"></el-input>
                </el-form-item>

                <el-form-item label="密码">
                  <el-input type="password" v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item label="用户类型" style="text-align: left;">
                  <el-radio v-model="form.userType" label='0'>求职者</el-radio>
                  <el-radio v-model="form.userType" label='1'>企业</el-radio>
                </el-form-item>
                
                <el-form-item class="logon-btn">
                  <el-button type="primary" @click="onSubmit">登陆</el-button>
                </el-form-item>
              </el-form>
              <div class="hint-organize">
                <p class="row">还没有账号？ 
                  <router-link to="/register">立即注册</router-link>
                  <router-link to="/forgetpass">忘记密码</router-link>
                </p>
              </div>
              <div class="other-one">
                <div class="text">  选择其他方式登录</div>
                <div class="content row">
                  <i class="iconfont icon-wechat-fill"></i>  
                  <i class="iconfont icon-QQ"></i>  
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="验证码登录" name="second">
              <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="手机号">
                  <el-input v-model="form.phone"></el-input>
                </el-form-item>

                <el-form-item label="验证码">
                  <div class="row">
                     <el-input v-model="form.code"></el-input>
                     <el-button plain class="acquire-msg" @click="hanldeGetCode" :disabled="totalTimeContent !== '获取验证码'">{{totalTimeContent}}</el-button>
                  </div>
                 
                </el-form-item>
                <el-form-item label="用户类型" style="text-align: left;">
                  <el-radio v-model="form.userType" label='0'>求职者</el-radio>
                  <el-radio v-model="form.userType" label='1'>企业</el-radio>
                </el-form-item>
                <el-form-item class="logon-btn">
                  <el-button type="primary" @click="onSubmit">登陆</el-button>
                </el-form-item>
              </el-form>
              <div class="hint-organize" style="border-bottom: 0;">
                <p class="row">还没有账号？ 
                  <router-link to="/register">立即注册</router-link>
                  <router-link to="/forgetpass">忘记密码</router-link>
                </p>
              </div>
              
            </el-tab-pane>
            <el-tab-pane label="微信登录" name="third">
              <div class="iconfont icon-erweima erweima"></div>
            </el-tab-pane>
          </el-tabs>

          
        </el-card>
      
      </div>
    </div>
    
  </div>
</template>
<script>
  import {checkPhone} from '../common/utils'
  export default {
    data(){
      return {
        // state: this.$store.state.a,
        activeName: 'first',
        form: {
          username: '',
          password: '',
          code:'',
          phone:'',
          type: '0',
          userType: '0',
        },
        totalTimeContent: '获取验证码', 
        totalTime: 30,
        code: null,
      }
    },
    mounted(){
      this.form.userType = this.$route.params.userType;
    },
    methods: {
      handleClick(tab, event) {
        console.log(parseInt(tab.index));
        this.form.type = tab.index;
      },
      countDown() {
        this.totalTime = 30;
        let clock = window.setInterval(() => {
          if(this.totalTime == 0){
             this.totalTimeContent = '获取验证码';
             clearTimeout(clock);
             return 
          }
          this.totalTime--
          this.totalTimeContent = this.totalTime + 's后重新发送'
          
        },1000)
      },
      async onSubmit() {
         try {
            let _form = JSON.parse(JSON.stringify(this.form));
            _form.userType = parseInt(this.form.userType)
            if(_form.type == 1){
              if(this.form.phone == '') throw '手机号不能为空';
              if(this.form.code == '') throw '验证码不能为空';
              if(this.form.code !== this.code) throw '验证码不正确';
              _form.password = _form.code;
              _form.username = _form.phone;
              let res = await this.$store.dispatch('login',_form)
              if(res.code == 0){
                let {entries} = Object;
                for (let [key, value] of entries(this.form)) {
                  key == 'userType' ? this.form[key] ='0' :this.form[key] = ''; 
                }
              }

            }

            let res = this.$store.dispatch('login',_form);
            if(res.code == 0){
              let {entries} = Object;
              for (let [key, value] of entries(this.form)) {
                key == 'userType' ? this.form[key] ='0' :this.form[key] = ''; 
              }
            }

          } catch (error) {
            this.$message.error(error)
            return
          }
      },
      async hanldeGetCode(){
        try {
          if(this.form.phone == '') throw '手机号不能为空';
          if(this.form.phone.length !== 11) throw '请输入正确的11位手机号';
          if(!checkPhone(this.form.phone)) throw '请输入正确的11位手机号';
          this.countDown();
          let _form = JSON.parse(JSON.stringify(this.form));
          let res = await this.$store.dispatch('getAuthCode',{mobile: _form.phone + ''});
          console.log(res,'121123123');
          res.code == 0 && (this.code = res.data);
        } catch (error) {
          this.$message.error(error)
          return
        }
        
      }
    }
  }
</script>

<style media="screen" lang="less">
  .login {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    text-align: center;


    .container {
      width: 100vw;
      height: 100vh;
    }

    .sub-bg-left {
      background: url("./../assets/login/right_banner_bg.png");
      width: 500px;
      height: 100%;
      background-size: 100% 100%;
      background-position: center;
      flex: 4;

      img {
        width: 100%;
      }
    }

    .sub-content-right {
      padding: 15px;
      flex:7;
      .label-to-home {
        text-align: right;
      }

      .text {
        font-size: 14px;
      }

      .item {
        padding: 18px 0;
      }

      .box-card {
        width: 458px;
        margin: 0 auto;
        margin-top: 200px;
      }

      .el-tabs__nav {
        width: 100%;
      }

      .el-tabs__item {
        width: 33.33%;
      }

      .el-input__inner {
        border: 0;
        border-bottom: 1px solid #eee;
        border-radius: 0;
      }

      .logon-btn .el-form-item__content{
        margin-left: 23px !important;
      }

      .el-button {
        width: 100%;
      }

      .hint-organize {
        font-size: 13px;
        text-align: left;
        margin-left: 23px;
        padding-bottom: 15px;
        border-bottom: 1px dotted #ccc;
        p {
          color: #a8b4cb;
          a{
            color: #1a8afa;
            margin-left: 10px;
          }
          a:first-child{
            flex: 1;
          }
        }
      }

      .other-one {
        
        .text{
          text-align: center;
          color: #a8b4cb;
          cursor: pointer;
          margin: 15px;
          font-size: 13px;
        }

        .content {
          justify-content: center;
          .iconfont {
            font-size: 22px;
            margin-right: 24px;
            cursor: pointer;
            color: #909798;
          }
          .iconfont:last-child {
            margin-right: 0;
          }
        }
      }

      .acquire-msg {
        width: 120px;
        text-align: center;
      }
    }

    .erweima {
      font-size: 224px;
    }
  }
</style>
